<template>
	<view class="share-rewards">
		<!-- 分享奖励 -->
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view class="" slot="center">
				<text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">分享奖励</text>
			</view>
		</u-navbar>
		<view
			class="set-data-container w-750 b-box d-flex flex-c ali-i-c  po-re"
			style="background-color: #F2F3F7;"
			:style="{ height: containerHeight }"
		>
			<!-- 1 -->
			<view
				style="height: 234rpx;margin: 16rpx;padding: 64rpx 42rpx 48rpx;"
				class="w-750 b-box d-flex flex-c bg-ff ali-i-e just-s"
			>
				<view
					style="height: 68rpx;margin-bottom: 14rpx;"
					class="d-flex flex-r ali-i-c just-s w-100 b-box"
				>
					<image
						:src="require('../static/share.png')"
						style="width: 64rpx;height: 68rpx;margin-right: 16rpx;"
					></image>
					<text class="pf-sc fw-600" style="font-size: 68rpx;color: #3F0C00;">￥{{dataList.money}}</text>
				</view>
				<view class="b-box d-flex flex-r ali-i-c just-s" style="flex: 1;width: 570rpx;">
					<view><text class="pf-sc fw-400 c-333" style="font-size: 28rpx;">我的奖励</text></view>
					<u-line
						:customStyle="{ margin: '0 20rpx 0 16rpx', position: 'relative', top: '3rpx' }"
						color="#E1E1E1"
						length="20rpx"
						direction="col"
					></u-line>
					<view class="d-flex flex-r ali-i-c just-s po-re" style="top:2rpx;" @click="ShowRule">
						<text class="pf-sc fw-400" style="font-size: 26rpx;color: #999999;margin-right: 10rpx;">
							奖励规则
						</text>
						<image
							:src="require('../static/rightc.png')"
							style="width: 13rpx;height: 19rpx;"
						></image>
					</view>
				</view>
			</view>
			<!-- 2 -->
			<view class="w-100 b-box d-flex flex-c bg-ff" style="flex: 1;">
				<!--  -->
				<view
					class="w-100 b-box po-re bg-ff"
					style="padding: 0 36rpx;border-bottom: 2rpx solid #F6F6F6;"
				>
					<view style="height: 106rpx;" class="d-flex flex-r ali-i-c just-sw">
						<text class="fw-500 pf-sc " style="font-size: 30rpx;color: rgba(0,0,0,0.9000);">
							奖金明细
						</text>
					</view>
					<view
						class="po-ab"
						style="width: 32rpx;height:6rpx;background: #FF5C00;opacity: 1;transform: rotate(90deg);left: -14rpx;top: 49%;"
					></view>
				</view>
				
				<!--  -->
				<view class="w-100 b-box bg-ff" style="padding: 0 32rpx;margin-bottom: 50rpx;" v-for="(item,index) in list1" :key="item.id">
					<view
					  v-if="item.type==4"
						style="height: 124rpx;border-bottom: 2rpx solid #F6F6F6;"
						class="d-flex flex-r ali-i-c just-sw"
					>
						<view class=" d-flex flex-c ali-i-s just-s" style="flex: 3">
							<view class="d-flex flex-r ali-i-c just-s" style="margin-bottom: 8rpx;">
								<u-badge
									:show="true"
									:customStyle="{ marginRight: '8rpx', borderRadius: '6rpx' }"
									type="warning "
									bgColor="#ED1D15"
									color="#ffffff"
									shape="horn"
									max="1"
									value="直推"
									
								></u-badge>
								<view
									class="pf-sc fw-400"
									style="font-size: 30rpx;color: rgba(0,0,0,0.9000);"
								>
								{{item.memo}}
								</view>
							</view>
							<text class="pf-sc fw-400" style="font-size:24rpx;color: #999999;">{{item.createtime}}</text>
						</view>
						<view class="d-flex flex-rr ali-i-c" style="flex: 1.5;">
							<text class="fw-500 pf-sc" style="font-size: 34rpx;color: #FF5C00;">+{{item.money}}</text>
						</view>
					</view>
				</view>
				
				
				
				<view class="w-100 b-box bg-ff" style="padding: 0 32rpx;" v-for="(item,index) in list1" :key="item.id">
					<view
					v-if="item.type==5"
						style="height: 124rpx;border-bottom: 2rpx solid #F6F6F6;"
						class="d-flex flex-r ali-i-c just-sw"
					>
						<view class=" d-flex flex-c ali-i-s just-s" style="flex: 3;">
							<view class="d-flex flex-r ali-i-c just-s" style="margin-bottom: 8rpx;">
								<u-badge
									:show="true"
									:customStyle="{ marginRight: '8rpx', borderRadius: '6rpx' }"
									type="warning "
									bgColor="#FBB704"
									color="#ffffff"
									shape="horn"
									max="1"
									value="间推"
								></u-badge>
								<view
									class="pf-sc fw-400"
									style="font-size: 30rpx;color: rgba(0,0,0,0.9000);"
								>
								{{item.memo}}
								</view>
							</view>
							<text class="pf-sc fw-400" style="font-size:24rpx;color: #999999;">{{item.createtime}}</text>
						</view>
						<view class="d-flex flex-rr ali-i-c" style="flex: 1.5;">
							<text class="fw-500 pf-sc" style="font-size: 34rpx;color: #FF5C00;">+{{item.money}}</text>
						</view>
					</view>
				</view>
				
				
				
				
				
				
				
				
				
	
				<view class="w-100 b-box bg-ff" style="padding: 0 32rpx;">
					<view
						style="height: 124rpx;border-bottom: 2rpx solid #F6F6F6;"
						class="d-flex flex-r ali-i-c just-sw"
					>
						<view class=" d-flex flex-c ali-i-s just-s" style="flex: 3;">
							<view class="d-flex flex-r ali-i-c just-s" style="margin-bottom: 8rpx;">
								<u-badge
									:show="false"
									:customStyle="{ marginRight: '8rpx', borderRadius: '6rpx' }"
									type="warning "
									bgColor="#FBB704"
									color="#ffffff"
									shape="horn"
									max="1"
									value="间推"
								></u-badge>
								<text
									class="pf-sc fw-400 text-ep-1"
									style="font-size: 30rpx;color: rgba(0,0,0,0.9000);"
								>
								</text>
							</view>
							<text class="pf-sc fw-400" style="font-size:24rpx;color: #999999;"></text>
						</view>
						<view class="d-flex flex-rr ali-i-c" style="flex: 1.5;">
							<text class="fw-500 pf-sc" style="font-size: 34rpx;color: #666666;"></text>
						</view>
					</view>
				</view>
				
				
				
				
				
				
				
				
			</view>
		</view>
		<u-popup
			:show="PopupShow"
			:customStyle="{ borderRadius: '16rpx', overFlow: 'hidden' }"
			mode="center"
			:closeOnClickOverlay="false"
			@close="PopupClose"
			round="16rpx"
		>
			<view
				style="width: 610rpx;height: 780rpx;padding: 36rpx 36rpx 42rpx;border-radius: 16rpx;overflow: hidden;"
				class="bg-ff b-box d-flex flex-c ali-i-c just-c po-re"
			>
				<text
					style="color:#666666;font-size: 36rpx;top:30rpx;right: 32rpx;"
					@click="PopupClose"
					class="pf-sc fw-400 po-ab"
				>
					×
				</text>
				<text class="pf-sc fw-500 c-000" style="font-size: 32rpx;margin-bottom: 34rpx;">
					奖励规则
				</text>
				<view style="flex: 1;" class="b-box">
					<view class="pf-sc fw-400 c-333" style="font-size: 28rpx;" v-html="dataList.rule">
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import {shareprize} from '@/common/api.js';
import { _containerHeight } from '@/utils/GetSys.js';
import Unavbar from '../components/uview-ui/components/u-navbar/u-navbar';
import uLine from '../components/uview-ui/components/u-line/u-line';
import uBadge from '../components/uview-ui/components/u-badge/u-badge';
import uPopup from '../components/uview-ui/components/u-popup/u-popup';

export default {
	components: {
		'u-navbar': Unavbar,
		'u-line': uLine,
		'u-badge': uBadge,
		'u-popup': uPopup
	},
	data() {
		return {
			containerHeight: '',
			PopupShow: false,
			dataList:'',
			list1:[],
			list2:[]
		};
	},
	methods: {
		PopupClose() {
			this.PopupShow = false;
		},
		ShowRule() {
			//查看规则
			this.PopupShow = true;
		},
		getData(){
			let params={
				token:uni.getStorageSync('usertoken'),
				page:1
			}
			shareprize(params).then((res)=>{
				
				this.dataList=res.data.data
				this.list1=res.data.data.list
			})
		}
	},
	onLoad() {
		this.containerHeight = _containerHeight();
		this.getData()
	}
};
</script>

<style lang="scss">
.share-rewards {
}
.u-badge{
	width: 72rpx !important;
	margin-right: 20rpx !important;
}
</style>
